<template>
  <div  class="sse">
  
   
    <div class="search">
      <van-search
        v-model="value"
        show-action
         shape="round"
        placeholder="搜索一下"
        @search="onSearch(value)"
      >
        <template #action>
          <div @click="onSearch(value)">搜索</div>
        </template>
      </van-search>
    </div>
    
       
    <!-- 展示区 -->
    
  
      <div class="list">
 
  
        <VueMoviesBoxList :search="searchResult" />
      </div>

    
    </div>
    
</template>

<script>
import { mapState } from "vuex";
import { GetserchAPI,GETGOODAPI,GETGOODMOVIEAPI} from "@/api/api.js";
import VueMoviesBoxList from "@/components/home/box_list.vue";
import MySearch from "@/components/home/MySearch.vue";
import MusicLaoding from "@/components/common/laoding.vue";

export default {
  name: "VueMovieSearch",
  components: {MusicLaoding, VueMoviesBoxList,MySearch , },
  props: ["goodlist"],
  data() {
    return {
      value: "",
      searchResult: [],
glist:[],
      movieListshow: true,
       music:{}
    };
  },
  computed: {
    ...mapState(["cityId"]),
  },
  mounted() {
    this.onSearch("蝙蝠侠");
      
       
      GETGOODMOVIEAPI().then((res8) => {
        this.glist= res8;
      });
    
  },

 
  methods: {
    onSearch(val) {
      GetserchAPI({
        keyword: val,
        ci: this.cityId,
     
      
      }).then((res) => {
        if (res.status == 200) {
        
       const movs = res.data.map((item) => ({
            id: item.id,
           img: item.poster,
          nm: item.name,
           sc: item.score,
           cat:item.catogary,
           star:item.star,
           showinfo:item.ename,
           wish:item.wish,
           comingTitle:item.ename,
           rt: item.release,
          
          }));

          
          this.searchResult =[...Object.values(movs)]
          this.movieListshow = false;
        }
      });
    },
    onCancel() {},
  },
};
</script>

<style lang="less" scoped>
.sse {
  .search {
    margin-top: 10px;
   .van-search__content--round{
     border: 1px solid #1041ff;
   }
  }
  
}

</style>